<template>
  <div class = "right-panel">
    <el-drawer
        :model-value = "modelValue"
        :direction = "direction"
        :show-close = "showClose"
        :custom-class = "customClass"
        :with-header = "withHeader"
        :title = "title"
        :size = "size"
        @close = "handleClose"
    >
      <slot/>
    </el-drawer>
  </div>
</template>

<script lang = "ts">
import { defineComponent, PropType } from 'vue'

type IDirection = 'rtl' | 'ltr' | 'ttb' | 'btt'

export default defineComponent({
  name: 'RightPanel',
  props: {
    modelValue: { type: Boolean, default: true },
    direction: { type: String as PropType<IDirection>, default: 'rtl' },
    title: { type: String, default: '自定义title' },
    size: { type: [ String, Number ] },
    customClass: { type: String, default: 'setting-panel' },
    showClose: { type: Boolean, default: true },
    withHeader: { type: Boolean, default: true }
  },
  emits: [ 'update:modelValue', 'close' ],
  setup(props, { emit }) {
    const handleClose = () => {
      emit('update:modelValue', false)
      emit('close')
    }

    return {
      handleClose
    }
  }
})
</script>
